<template>
  <el-dialog
    class="troila-dialog"
    title="添加来访人"
    :visible.sync="dialogFormVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="500px"
  >
    <el-form class="troila-form" :model="form" :rules="rules" ref="form">
      <el-form-item label="来访人" :label-width="formLabelWidth" prop="name">
        <el-input
          v-model="form.name"
          auto-complete="off"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
        <el-input
          v-model="form.phone"
          auto-complete="off"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="身份证号" :label-width="formLabelWidth" prop="card">
        <el-input
          v-model="form.card"
          auto-complete="off"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="访客类型"
        :label-width="formLabelWidth"
        prop="region"
      >
        <el-select
          v-model="form.region"
          placeholder="请选择活动区域"
          popper-class="troila-popper"
        >
          <el-option label="类型一" value="shanghai"></el-option>
          <el-option label="类型二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="来访人单位"
        :label-width="formLabelWidth"
        prop="company"
      >
        <el-input
          v-model="form.company"
          auto-complete="off"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">{{
        ajaxIng ? '关 闭' : '取 消'
      }}</el-button>
      <el-button type="primary" :loading="ajaxIng" @click="submitForm('form')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'unitDialog',
  data() {
    return {
      dialogFormVisible: true,
      form: {
        name: '',
        phone: '',
        card: '',
        company: '',
        region: '',
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入来访人', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        card: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        region: [
          { required: true, message: '请选择访客类型', trigger: 'blur' },
        ],
        company: [
          { required: true, message: '请输入来访人单位', trigger: 'blur' },
        ],
      },
      ajaxIng: false,
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ajaxIng = true
          alert('submit!')
          this.dialogFormVisible = false
          this.$alertFn.success(`操作成功 ！`)
          // this.$alertFn.error(`操作失败 ！`)
          this.$emit('change')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>